<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Sa-Sso-Pro Client 端 - 前后端分离 (原生h5) 对接演示</title>
		<style type="text/css">
			body{/* background-color: #A7D2CA; */}
			*{margin: 0px; padding: 0px;}
			.login-box{max-width: 1000px; text-align: center; margin: 30px auto; padding: 1em;}
			.login-info, .un-login-info{line-height: 40px; display: none;}
			.logo-box img{width: 220px; height: 220px;}
			p{color: #666;}
			.green{color: green;}
			.red{color: red;}
			a{text-decoration: none; margin-right: 10px; line-height: 20px; display: inline-block; border-bottom: 1px solid #FFF;}
			a:hover{border-bottom: 1px solid blue;}
			h3{margin-top: 20px; margin-bottom: 0px; color: #000;}
			/* loading框样式 */
			.ajax-layer-load.layui-layer-dialog{min-width: 0px !important; background-color: rgba(0,0,0,0.85);}
			.ajax-layer-load.layui-layer-dialog .layui-layer-content{padding: 10px 20px 10px 40px; color: #FFF;}
			.ajax-layer-load.layui-layer-dialog .layui-layer-content .layui-layer-ico{width: 20px; height: 20px; background-size: 20px 20px; top: 12px; }
		</style>
	</head>
	<body>
		<div class="login-box">
			<div class="logo-box">
				<img src="https://sa-token.cc/logo.png" alt="logo">
			</div>
			<br>
			<h2>Sa-Sso-Pro Client 端 - 前后端分离 (原生h5) 对接演示</h2> <br>
			<p>当前系统：<span class="client-domain"></span></p> <br>
			<!-- ---------- 已登录视图 ---------- -->
			<div class="login-info">
				<h3>账号状态</h3>
				<p>
					<b class="green">已登录</b>
					（
						<span>账号id=<t class="user-id"></t></span>，
						<span>昵称=<t class="user-username"></t></span>，
						<span>年龄=<t class="user-age"></t></span>，
						<span>登录次数=<t class="user-loginCount"></t></span>
					)
				</p>
				<h3>相关操作</h3>
				<p>
					<a href="javascript:location.href=baseUrl + '/sso/logout?satoken=' + localStorage.satoken + '&back=' + encodeURIComponent(location.href);">跳页面注销</a>
					<a href="javascript:logout();">使用Ajax调用API注销</a> 
					<a href="javascript:logoutByAlone();">当前应用单独注销</a>
				</p>
			</div>
			<!-- ---------- 未登录视图 ---------- -->
			<div class="un-login-info">
				<h3>账号状态</h3>
				<p>
					<b class="red">未登录</b>
				</p>
				<h3>相关操作</h3>
				<p>
					<a href="javascript:location.href='sso-login.html?back=' + encodeURIComponent(location.href);">直接登录</a>
					<a href="javascript:getCurrInfo();">使用Ajax调用API触发登录</a>
				</p>
			</div>
			<div style="height: 200px;"></div>
		</div>
		<script src="static/kj/jquery.min.js"></script>
		<script src="static/kj/layer/layer.js"></script>
		<script src="static/base-util.js"></script>
		<script type="text/javascript">
		
			// 显示当前系统域名 
			$('.client-domain').html(location.protocol + "//" + location.host);
		
			// 查询当前会话是否登录 
			function loadinfo() {
				sa.ajax('/getCurrInfo', {}, function(res) {
					if(res.code == 200) {
						$('.login-info').show();
						$('.un-login-info').hide();
						$('.user-id').text(res.data.id);
						$('.user-username').text(res.data.username);
						$('.user-age').text(res.data.age);
						$('.user-loginCount').text(res.data.loginCount);
					} else if(res.code == 401){
						$('.login-info').hide();
						$('.un-login-info').show();
					} else {
						layer.alert(res.msg, {icon: 2 }); 
					}
				})
			}
			$(function() {
				loadinfo();
			})
			
			// 调用API触发登录 
			function getCurrInfo() {
				sa.ajax('/getCurrInfo', {}, function(res) {
					// 根据返回的状态码执行不同动作
					if(res.code == 200) {
						layer.alert(res.msg);
					} else if (res.code == 401){
						layer.confirm('该数据仅对登录用户开放，现在就去登录？', function() {
							location.href = 'sso-login.html?back=' + encodeURIComponent(location.href);
						});
					} else {
						layer.alert(res.msg);
					}
				});
			}
			
			// 调用API进行注销 
			function logout() {
				sa.ajax('/sso/logout', {}, function(res) {
					// 根据返回的状态码执行不同动作
					if(res.code == 200) {
						layer.msg('注销成功');
						setTimeout(function() {
							location.reload(true);
						}, 800);
					} else {
						layer.alert(res.msg);
					}
				});
			}
			
			// 当前应用独自注销
			function logoutByAlone() {
				sa.ajax('/sso/logoutByAlone', {}, function(res) {
					// 根据返回的状态码执行不同动作
					if(res.code == 200) {
						layer.msg('注销成功');
						setTimeout(function() {
							location.reload(true);
						}, 800);
					} else {
						layer.alert(res.msg);
					}
				})
			}

		</script>
	</body>
</html>
